<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
    <p>我需要蓝色</p>
    <span>我不需要变色</span>
  </ul>
  <script>
    let ul=document.querySelector(`ul`)
    ul.addEventListener(`click`, function (a) {
        if (a.target.tagName === `LI`) {
          a.target.style.color = `red`;
        } if (a.target.tagName === `P`) { a.target.style.color = `blue` }
      })
    // 以事件委托的形式实现
    // 点击每个小li 当前li 文字变为红色
  
    // 遍历lis,给每个li元素添加一个点击事件
    // 思考如果li有10000个,批量添加事件,效率低下
   

   
    
  
  </script>
</body>

</html>